<template>
  <el-dialog
    v-model="dialogVisible"
    append-to-body
    :title="title"
    width="30%"
    :before-close="handleClose"
  >
    <div class="freight-child-dialog">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item label="区域">
          <el-tree-select
            default-expand-all
            node-key="id"
            filterable
            v-model="ruleForm.area"
            :data="treeData"
            clearable
            :render-after-expand="false"
            :props="{
              label: 'name',
              children: 'sub',
            }"
            style="width: 100% !important"
            placeholder="选择区域"
            show-checkbox
            multiple
            check-on-click-node
          >
          </el-tree-select>
          <div style="color: rgb(185, 183, 183); font-size: 12px">
            *区域未选择默认为全国
          </div>
        </el-form-item>
        <el-form-item label="件数/重量" prop="sNum">
          <el-input
            placeholder="件数/重量"
            style="width: 100%"
            v-model="ruleForm.sNum"
          />
        </el-form-item>
        <el-form-item label="包邮价格(元)" prop="sPrice">
          <el-input
            placeholder="包邮价格"
            style="width: 100%"
            v-model="ruleForm.sPrice"
          />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="submit"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
let ruleForm = ref({});
const props = defineProps({
  treeData: {
    type: Array,
    default: [],
  },
});

let rules = {
  sNum: [{ required: true, message: "件数/重量", trigger: "blur" }],
  sPrice: [{ required: true, message: "包邮价格", trigger: "blur" }],
};
let dialogVisible = ref(false);
function handleClose(done) {
  // dialogVisible.value = false;
  ElMessageBox.confirm("是否确定关闭此对话框?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
}
let title = ref("");
let ruleFormRef = ref(null);
function initFun(type, row) {
  if (ruleFormRef.value) {
    ruleFormRef.value.resetFields();
  }

  if (type == "add") {
    title.value = "新增";
    ruleForm.value = {};
  } else {
    title.value = "编辑";
    ruleForm.value = Object.assign({}, row);
    if (row.city) {
      ruleForm.value.area = row.city.map((ele) => {
        return ele.id;
      });
    }
  }

  dialogVisible.value = true;
}

const emit = defineEmits(["refreshPost"]);
function submit() {
  if (!ruleFormRef.value) return;
  ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      if (!ruleForm.value.area || ruleForm.value.area.length == 0) {
        ruleForm.value.city = [];
      }
      let obj = Object.assign({}, ruleForm.value);
      emit("refreshPost", obj);
      ruleForm.value = {};
      dialogVisible.value = false;
    }
  });
}

onMounted(() => {});
defineExpose({
  initFun,
});
</script>
<style scoped lang="scss">
.freight-child-dialog {
  :deep(.el-form-item) {
    width: 100%;
    margin-right: 10px;
  }

  :deep(.table-form-item) {
    .el-form-item__label {
      width: 150px !important;
      margin-left: 10px !important;
    }
  }
}
</style>
